<template>
    <div>
        <test-title title="Vue组件化"></test-title>
        <test-button @click="handleClick">点击按钮</test-button>
        <p>
            <img :src="img1" style="width: 200px;" alt="个人头像">
        </p>
    </div>
</template>

<script>
    //导入组件
    import TestTitle from './TestTitle.vue';
    import TestButton from './TestButton.vue';

    //导入图片
    import img1 from './images/avatar.jpg';

    export default {
        components: {
            TestTitle,
            TestButton,
        },
        methods: {
            handleClick (e) {
                alert(e);
                console.log(e)
            }
        },
        data () {
            return {
                img1,
            }
        }
    }
</script>

<style >
    div {
        color: #f60;
        font-size: 24px;
    }
</style>
